Toggle-Switch Guidelines切換開關

切換開關是數字化的開關控制元件，用於在兩個互斥狀態之間切換（如開/關）。它們應具備預設值，並提供即時效果，幫助使用者靈活控制偏好設定。

切換開關的適用場景

切換開關適合用於調整系統功能或偏好設定的狀態。與其他控制元件（如單選按鈕、核取方塊）相比，切換開關的特點如下：

使用提示

• 即時效果：切換開關應立即生效，而無需點選“儲存”或“提交”。

• 避免混淆：對於需要使用者點選提交的場景，選擇單選按鈕或核取方塊更為合適。

切換開關設計指南

1. 提供即時效果

切換開關的設計應遵循現實世界的互動模式（如電燈開關）。使用者期望切換後立即看到效果，而不是透過額外步驟確認狀態變化。

錯誤示例：United Airlines iOS應用中的切換開關，使用者點選後沒有即時結果，導致疑惑。此場景更適合使用核取方塊。

正確示例：iOS系統中的飛航模式開關，切換後狀態即時更新，頂部狀態列的圖示也隨之變化。

2. 使用簡潔、明確的標籤

標籤設計原則：

關鍵詞優先：如“郵件通知”、“簡訊通知”，避免使用冗長的描述性問題（如“您是否希望接收郵件通知？”）。

明確描述：標籤應能清楚表達開關開啟後的效果，避免中性或模糊的措辭。

案例對比：

錯誤示例：Le Tote的標籤“包括非孕婦用品？”過於模糊，使用者難以判斷開關狀態。

正確示例：Google Calendar的開關標籤直接描述了狀態，清晰易懂。

3. 遵循標準視覺設計

視覺反饋：切換開關的狀態變化應透過位置、顏色變化清晰表現。

高對比度顏色：確保開關狀態的顏色對比明顯，避免低對比度設計導致使用者無法區分開關狀態。

文化適應性：例如，紅色通常用於警告，可能不適合作為開關的“開啟”狀態。

錯誤示例：Windows 10的切換開關僅在右側顯示“關閉”狀態描述，容易引發混淆。

正確示例：Daylio Android應用透過顏色變化清晰區分狀態，無需額外狀態描述。

4. 確保一致性

切換開關的設計和實現應在整個應用中保持一致。如果混用切換開關、單選按鈕等控制元件，會增加使用者的學習成本和操作困惑。

案例對比：

錯誤示例：Chase Bank iOS應用在不同頁面中混用切換開關和單選按鈕，使用者難以預測控制元件的行為。